<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div :class="{ topbar: true, active: isActive }" :style="{ backgroundColor: bgColor, color: title.color }">
        <div class="left">{{ title.value }}</div>
        <div class="right"><img :src="wechatBar" /></div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    props: {
        title: { type: Object },
    },

    methods: {
        saveHandle: function () { },
        previewHandle: function () { },
        resetHandle: function () { },
    },

    computed: {
        isActive: function () {
            // 当前页面的标题是否显示为选中状态？
            // 当点击标题栏后，右侧编辑器切换为page，此时标题栏被选中
            return this.$store.state.pagemaker.focus === "page";
        },
        bgColor: function () { 
            // this.title.bgColor;
            if (this.title.color_type == "auto"){
                return this.$store.state.myconfig.color.primary || '#1989fa'
            } else {
                return this.title.bgColor
            }
         },
    },

    data () {
        return {
            wechatBar: require("@/assets/images/pagemaker/wechat-bar.png"),
        };
    },
};
</script>
<style scoped>
.topbar {
    height: 100px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.left {
    padding-left: 16px;
}

.right img {
    height: 60px;
    width: 168px;
    margin-right: 16px;
}
</style>